import styled from 'styled-components'

export const BannerWrap = styled.div `
    background: url(${props => props.imageBg}) no-repeat center center;
    background-size: 5000px;
    height: 283.89px;
    .banner{
        position: relative;
        display: flex;
    }
`

export const BannerLeft = styled.div `
    width: 730px;
    .banner-item{
        height: 285px;
    }
    .ant-carousel .slick-slide img {
        width:100%;
        height: 285px;
    }

    .ant-carousel .slick-dots li button{
        width:8px;
        height:8px;
        border-radius: 50%;
    }
    .ant-carousel .slick-dots li{
        width:16px;
    }
    
    .ant-carousel .slick-dots li.slick-active button,
    .ant-carousel .slick-dots li button:hover{
        width:8px;
        background-color: red;
    }
`

export const BannerRight = styled.a.attrs({
    href : "https://music.163.com/#/download",
    target:"_blank"
}) `
    width: 254px;
    height: 285px;
    background: url(${require("@/assets/img/download.png").default});
`

export const BannerControl = styled.div `
    position: absolute;
    height:63px;
    left:0;
    right:0;
    top:50%;
    transform: translateY(-50%);

    .btn{
        width:37px;
        height:63px;
        background-image: url(${require("@/assets/img/banner_sprite.png").default});
        background-color: transparent;
        cursor: pointer;
    }
    
    .left {
        position: absolute;
        left: -68px;
        background-position: 0 -360px;
    }

    .left:hover{
        background-position: 0 -430px;
    }

    .right {
        position: absolute;
        right: -68px;
        background-position: 0 -508px;
    }

    .right:hover{
        background-position: 0 -578px;
    }
`